<template>
	<div class="newPage-status">
		<x-header :left-options="{backText: ''}" class="newPage-head">{{title}}</x-header>
		<div v-if="status===1">
			<div class="status">
				<img src="../../assets/msg-imgs/msh_review_waiting_artwork.png" style="width:2.88rem"/>
				<p>越过山丘，才发现有朵花在等候</p>
			</div>
			<div class="status-box under-review">
				<img src="../../assets/msg-imgs/msh_shenhe.png" style="width:1.48rem"/>
				<dl>
					<dt>审核中</dt>
					<dd>正在审核您的额度，请稍后···</dd>
				</dl>
			</div>
		</div>
		<div v-else-if="status===2">
			<div class="status">
				<img src="../../assets/msg-imgs/msh_review_approved_artwork.png" style="width:2.23rem"/>
				<p>如果有人问你额度有多高，<br />你可以大声告诉TA：不到一百万！</p>
			</div>
			<div class="status-box success">
				<img src="../../assets/msg-imgs/msh_approved.png" style="width:1.51rem"/>
				<dl>
					<dd>恭喜你成功获得额度</dd>
					<dt>￥30000.00</dt>
				</dl>
				<span>够信用 马上花</span>
			</div>
			<div class="status-btns">
				<button>逛一逛</button>
				<button>查看详情</button>
			</div>
		</div>
		<div v-else-if="status===3">
			<div class="status">
				<img src="../../assets/msg-imgs/msh_review_rejected_artwork.png" style="width:1.89rem"/>
				<p>总以为付出就会有回报<br />原来只是你的天真跟你开的玩笑</p>
			</div>
			<div class="status-box fail">
				<img src="../../assets/msg-imgs/mobile_rpasw_fail.png" style="width:1.51rem"/>
				<h1>很抱歉额度申请失败</h1>
				<p>期待下一次遇见更好的自己<br />30天后可重试</p>
			</div>
			<button class="btn-back btn-next">返回</button>
		</div>
		<div v-else-if="status===4">
			<div class="status">
				<img src="../../assets/msg-imgs/msh_review_waiting_artwork.png" style="width:2.23rem"/>
				<p>越过山丘，才发现有朵花在等候</p>
			</div>
			<div class="status-box time-out">
				<div>
					<img src="../../assets/msg-imgs/msh_error.png" style="width:1.54rem"/>
				</div>
				<dl>
					<dt>审核超时</dt>
					<dd>你的审核已超时，请重试···</dd>
				</dl>
			</div>
			<button class="btn-refresh btn-next">刷新</button>
		</div>
		<div v-else>
			<div class="status">
				<img src="../../assets/msg-imgs/msh_review_waiting_artwork.png" style="width:2.23rem"/>
				<p>越过山丘，才发现有朵花在等候</p>
			</div>
			<div class="status-box unusual">
				<div>
					<img src="../../assets/msg-imgs/msh_error.png" style="width:1.54rem"/>
				</div>
				<dl>
					<dt>网络异常</dt>
					<dd>网络出现异常，请重试···</dd>
				</dl>
			</div>
			<button class="btn-refresh btn-next">刷新</button>
		</div>
		<div class="contact-user">
			<span>联系客服</span>
		</div>
	</div>
</template>

<script>
	import { XHeader, XInput, Group, Cell } from 'vux'
	export default {
		components: {
	      XHeader,
	      XInput,
	      Group,
	      Cell
	    },
	    created(){
	      document.title = '马上花';
	    },
	    data () {
	      return {
	        title: '额度审核中',
	        status: 5
	      }
	    }
	}
</script>

<style lang="less">
	@import '../styles/main.less';
	body {
		background: #FFF;
	}
	.newPage-status {
		.status {
			text-align: center;
			margin-top: .2rem;
			p {
				font-size: .28rem;
				margin-top: .1rem;
			}
		}
		.status-box {
			text-align: center;
			&.under-review {
				margin-top:1rem;
				dl{
					margin-top: .5rem;
					dt{
						font-size: .4rem;
						color: #282828;
					}
					dd {
						font-size: .3rem;
						color: #636363;
					}
				}
			}
			&.success {
				margin-top: .5rem;
				dl {
					color: #282828;
					margin-bottom: .2rem;
					dd {
						font-size: .36rem;
					}
					dt {
						font-size: .5rem;
					}
				}
				span {
					display: block;
					color:#909090;
					font-size: .3rem;
				}
			}
			&.fail {
				h1 {
					color:#282828;
					font-size: .36rem;
				}
				p {
					color: #909090;
					font-size: .3rem;
				}
			}
			&.time-out, &.unusual {
				img {
					margin: .5rem 0 .2rem;
				}
				dl{
					dt{
						font-size: .4rem;
						color:#282828;
					}
					dd {
						font-size: .3rem;
						color: #636363;
						margin-top: .1rem;
					}
				}
			}
		}
		.status-btns {
			margin-top: 1rem;
			text-align: center;
			button {
				width: 3.3rem;
				height: 1rem;
				border-radius: .08rem;
				color:#464646;
				font-size: .32rem;
				border: none;
				margin: 0 .1rem;
				&:first-child {
					background: #FBC200;
				}
				&:last-child {
					background: #BCBCBC;
				}
			}
		}
		.contact-user {
			margin-top: 1rem;
			text-align: center;
			span {
				font-size: .26rem;
				color: #909090;
			}
		}
	}
</style>